<script setup lang="ts">
import { useCategoryStore } from '@/stores'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
// 引入仓库
const store = useCategoryStore()
// 引入路由
const routr = useRoute()
// 通过计算属性计算出二级分类
const category = computed(() => {
  let obj: any = {}
  store.categoryDataList.forEach((top) => {
    top?.children.forEach((sub) => {
      if (sub.id === routr.params.id) {
        // 设置二级类目
        obj.sub = {
          id: sub.id,
          name: sub.name
        }
        // 设计一级类目
        obj.top = {
          id: top.id,
          name: top.name
        }
      }
    })
  })
  return obj
})
</script>

<template>
  <XtxBread v-if="Object.keys(category).length">
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <Transition name="fade-right" mode="out-in">
      <XtxBreadItem :key="category.top.id">
        {{ category.top.name }}
      </XtxBreadItem>
    </Transition>
    <Transition name="fade-right" mode="out-in">
      <XtxBreadItem :key="category.sub.id">
        {{ category.sub.name }}
      </XtxBreadItem>
    </Transition>
  </XtxBread>
</template>

<style lang="less" scoped></style>
